<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电影评分分析</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 设置页面容器样式 */
        body {
            padding: 20px;
        }
        /* 设置卡片样式 */
        .card {
            margin: 0 auto;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
    <script>
        function generateWordcloud() {
            const movieName = document.getElementById('movie_name').value;
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/generate_wordcloud', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const wordcloudImg = document.getElementById('wordcloud_img');
                    wordcloudImg.src = 'data:image/png;base64,' + xhr.responseText;
                    wordcloudImg.style.display = 'block';
                }
            };
            xhr.send('movie_name=' + encodeURIComponent(movieName));
        }
    </script>
</head>
<body>
    <div class="container mt-4">
        <h2 class="text-center">电影平均星级排名</h2>
        <div class="card shadow">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="card-title">Top 20 电影</h4>
                    <a href="{{ url_for('index') }}" class="btn btn-primary">返回上传</a>
                </div>
                <!-- 柱状图将显示在这里 -->
                {{ plot_html|safe }}
            </div>
        </div>
    </div>
    <div class="card shadow mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="card-title">电影评分箱线图</h2>
                <a href="{{ url_for('index') }}" class="btn btn-primary">返回上传</a>
            </div>
            <!-- 箱线图将显示在这里 -->
            {{ box_html|safe }}
        </div>
    </div>
<!--    <div class="card shadow mt-4">-->
<!--        <div class="card-body">-->
<!--            <h2 class="card-title">生成评论词云图</h2>-->
<!--            <select class="form-select" id="movie_name">-->
<!--                {% for movie in movie_names %}-->
<!--                    <option value="{{ movie }}">{{ movie }}</option>-->
<!--                {% endfor %}-->
<!--            </select>-->
<!--            <button type="button" class="btn btn-primary mt-3" onclick="generateWordcloud()">生成词云图</button>-->
<!--            <img id="wordcloud_img" src="" alt="Wordcloud" style="display: none; margin-top: 20px;">-->
<!--        </div>-->
<!--    </div>-->
    <div class="card shadow mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="card-title">低分评论 LDA 主题分析</h2>
                <a href="{{ url_for('index') }}" class="btn btn-primary">返回上传</a>
            </div>
        <!-- 低分LDA可视化内容 -->
            {{ low_lda_html|safe }}
        </div>
    </div>

    <div class="card shadow mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="card-title">高分评论 LDA 主题分析</h2>
                <a href="{{ url_for('index') }}" class="btn btn-primary">返回上传</a>
            </div>
        <!-- 高分LDA可视化内容 -->
            {{ high_lda_html|safe }}
        </div>
    </div>
    <div class="card shadow mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <a href="{{ url_for('clustering_visualization') }}" class="btn btn-info mt-3" target="_blank">查看聚类分析结果</a>
            </div>
        </div>
    </div>
<div class="card shadow mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <a href="{{ url_for('wordcloud_visualization') }}" class="btn btn-info mt-3" target="_blank">查看高频词云图汇总</a>
            </div>
        </div>
    </div>
</body>
</html>